import React, { useEffect } from 'react';
import { Toaster } from 'react-hot-toast';
import { ChatProvider } from './ctx/ChatContext';
import Sidebar from './compo/Sidebar';
import ChatContainer from './compo/ChatContainer';
import Header from './compo/Header';
import './App.css'

const App: React.FC = () => {
  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);

  // 在大屏幕上自动展开侧边栏
  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth >= 768) { // md 断点
        setIsSidebarOpen(true);
      } else {
        setIsSidebarOpen(false);
      }
    };

    // 初始化时执行一次
    handleResize();

    // 监听窗口大小变化
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  const toggleSidebar = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  return (
    <ChatProvider>
      <div className="flex h-screen bg-gradient-to-br from-gray-50 to-gray-100 text-gray-800">
        <Sidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />

        <div className="flex flex-col flex-1 h-full overflow-hidden">
          <Header toggleSidebar={toggleSidebar} />
          <ChatContainer />
        </div>

        <Toaster
          position="top-right"
          toastOptions={{
            style: {
              background: '#363636',
              color: '#fff',
              borderRadius: '8px',
            },
            duration: 3000
          }}
        />
      </div>
    </ChatProvider>
  );
};

export default App;